<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
    <style>
        /* Red border */
        hr.new1 {
            border-top: 12px solid red;
        }

        /* Thick red border */
        hr.new4 {
            border: 12px solid red;
        }

        /* Dashed red border */
        hr.new2 {
            border-top: 12px dashed red;
        }

        /* Dotted red border */
        hr.new3 {
            border: 12px dotted red;
        }



        /* Large rounded green border */
        hr.new5 {
            border: 12px solid green;
            border-radius: 12px;
        }
    </style>
</head>

<body>

    <h2>Style HR</h2>
    <p>Default:</p>
    <hr>
    <p>Different styles of HR:</p>
    <hr class="new1"><br>
    <hr class="new4"><br>

    
    <hr class="new2"><br>
    <hr class="new3"><br>
    <hr class="new5"><br>

    



    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        dotted 和 dashed:

        border-top: 12px dotted red;
        border-top: 12px dashed red;
    
        如果想展示一条线那么久用 border-top 来表示
    </xmp>



</body>
</html>